<template>
    <view>
        <view class="ball_list" v-if="Array.isArray(MyApplyList) && MyApplyList.length > 0">
					<block v-for="(item) in MyApplyList" :key="item.ID">
						<view class="listbox" @click="nav_to('/pages/mall/orderDetail?id='+item.ID)">
							<!-- <view class="status">
								{{'待使用'}}
							</view> -->
							<view class="contentbox">
								<image class="imgleft" :src="item.Item[0]?restoreImg(item.Item[0].ProductImg)[0]:''" mode="aspectFill"></image>
								<view class="rightbox">
									<view>
										<view class="nametext">{{ item.Item[0]?$util.entitiesToUtf16(item.Item[0].ProductName):'' }}</view>
										<view class="infobox">
											<image class="infoimg"
												src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17229991748171392.png">
											</image>
											<view class="infotext">{{ getTime2(item.OrderTime) }}</view>
										</view>
										<!-- <view class="infobox">
											<image class="infoimg"
												src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17229991973631170.png">
											</image>
											<view class="infotext hiddenText">{{ item.Place?item.Place:'' }}</view>
										</view> -->
									</view>
									<view class="pricebox">
							
										<view class="pricebtn" >{{changeprice(item)}}</view>
										<view class="sum">{{'x'+item.Item[0].Qty}}</view>

									</view>
								</view>
							</view>
						</view>
					</block>
                    
				</view>
                <block v-else>
					<u-empty mode="list" width="100" height="100"
						icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
						iconSize="32" text="暂无订单"></u-empty>

				</block>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    PageIndex:1,
    PageSize:10,
    MyApplyList:[],
};
},
onLoad(){
    this.orderPageList()
},
// 触底事件
  onReachBottom() {
        this.PageIndex++
        this.orderPageList()
  },
methods: {
	changeprice(item){
		if(item.Item[0]){
			if(item.Item[0].Price>0 && item.Item[0].Score>0){
				return '￥'+(item.Item[0].Qty*item.Item[0].Price)+'+'+'挥豆：'+(item.Item[0].Qty*item.Item[0].Score)
			}else if(item.Item[0].Score>0){
				return '挥豆：'+(item.Item[0].Qty*item.Item[0].Score)
			}else{
				return '￥'+(item.Item[0].Qty*item.Item[0].Price)
			}
		}else{
			return ''
		}
		
	},
    restoreImg(Images) {
			let str = Images || '';
			if (str.includes('.png') || str.includes('.jpg') || str.includes('.jpeg') || str.includes('.webp')) {
				let imglist = Images.split(',') || []

				return imglist
			} else {
				return []
			}
		},
    getTime2(l) {
				if(l){
                    return this.$util.unixDatetime(l, 'yy-ss');
                }else{
                    return ''
                }
				
		},
    async orderPageList(){
        let res = await this.$api.post('Order/MyOrders',{
            PageIndex:this.PageIndex,
            PageSize:this.PageSize,
            OrderType:'兑换订单',
            Status:99,
        })
        if(res.code == 0){
            if(this.PageIndex == 1){
                this.MyApplyList = res.data
            }else{
                this.MyApplyList = this.MyApplyList.concat(res.data)
            }
        }
    },
},
created() {

},
}
</script>
<style lang='scss'>
.ball_list {
	margin-top: 20rpx;

	.item {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 32rpx 24rpx;
	}

	.shadow {
		background-color: rgba(211, 211, 211, 0.6);
	}
}

.ball {
	padding-bottom: 30rpx;
}

.ball_list {
	margin-top: 20rpx;
	padding: 0 24rpx;
	width: 100%;

}
.listbox {
	width: 686rpx;
	margin: 24rpx auto;
	padding: 24rpx;
	background-color: #fff;
	border-radius: 16rpx;

	.status {
		font-size: 28rpx;
		color: #333333;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e4e4e4;
	}

	.contentbox {
		display: flex;
		margin-top: 30rpx;

		.imgleft {
			width: 176rpx;
			height: 232rpx;
			border-radius: 8rpx;
			margin-right: 32rpx;
			background-color: #706EEE;
		}

		.rightbox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.nametext {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;
			}

			.infobox {
				display: flex;
				align-items: center;

				.infoimg {
					width: 32rpx;
					height: 34rpx;
					margin-right: 4rpx;
				}

				.infotext {
					width: 350rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.pricebox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pricebtn {
					font-size: 32rpx;
                    font-weight: bold;
                    color: #333333;
				}
				.review{
					width: 112rpx;
					height: 56rpx;
					border-radius: 28rpx;
					border: 2rpx solid #e4e4e4;
					color: #999999;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-left: 54rpx;
				}
				.pricetext {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.sum {
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>